<template>
  <view class="warp_box">
    <view class="yihang">
      <input class="sousuo" type="text" placeholder="请输入货品编号/货品名称" />
      <button class="tianjia">添加货品</button>
      <img src="../../static/chuku/search-icon.png" alt="" />
    </view>
    <view class="erhang">
      <view class="x1">
        <text> 最新 </text>
        <img src="../../static/chuku/sort_down_red.png" alt="" />
      </view>
      <view class="x1">
        <text> 货号 </text>
        <img src="../../static/chuku/sort_default_gary.png" alt="" />
      </view>
      <view class="x1">
        <text> 库存量 </text>
        <img src="../../static/chuku/sort_default_gary.png" alt="" />
      </view>
      <view class="x4">
        <text> 全部分类 </text>
        <img src="../../static/chuku/down_triangle.png" alt="" />
      </view>
    </view>
    <view class="content">
      <view v-for="(item, index) in canshu" :key="item.id" class="neironghang">
        <view class="neironghangyihang">
          <view class="left">
            <img :src="`http://localhost:3006/${item.good.img}`" alt="" />
          </view>
          <view class="right">
            <view class="x1"> 货品名称：{{ item.good.name }} </view>
            <view class="x2">
              <text class="xx1">货品编号：{{ item.id }}</text>
              <text class="xx2">出：{{ item.num }}</text>
            </view>
            <img
              @click="shanchuhuopin_fn(index)"
              src="../../static/chuku/delete_red.png"
              alt=""
            />
          </view>
        </view>
        <view class="neironghangerhang">
          <view @click="shanchuhuopin_fn(index)" class="x0">
            <img src="../../static/chuku/close_red.png" alt="" />
          </view>
          <view class="x1"> M码 </view>
          <view class="x2"> 价格：{{ item.good.price }} </view>
          <view class="x3">
            <img
              @click="jian_fn(index)"
              src="../../static/chuku/minus_icon.png"
              alt=""
            />
            <text> {{ item.num }} </text>
            <img
              @click="jia_fn(index)"
              src="../../static/chuku/plus_icon.png"
              alt=""
            />
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="x1"> <button @click="toxuanze_fn">继续添加</button> </view>
      <view class="">
        <button @click="tochuangjian_fn">选好了({{ chuhuoshulaing }})</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      canshu: [],
      chuhuoshulaing: "",
    };
  },
  methods: {
    jian_fn(index) {
      console.log(index);
      if (this.canshu[index].num > 0) {
        console.log(this.canshu[index]);
        this.canshu[index].num--;
        this.canshu[index].good.num++;
        this.canshu[index].zongjia =
          this.canshu[index].num * this.canshu[index].good.price;
        uni.request({
          url: "http://localhost:3006/xiugaikucun",
          data: {
            num: this.canshu[index].good.num,
            id: this.canshu[index].good.id,
          },
          header: {
            "custom-header": "hello",
          },
          success: (res) => {
            console.log("数据请求成功。。。。。。。");
            this.canshu[index].good.num = res.data.goods_info.num;
            uni.setStorage({
              key: "storage_key",
              data: this.canshu,
              success: function () {
                console.log("相同货品存储成功");
              },
            });
          },
        });
      }
    },
    jia_fn(index) {
      if (this.canshu[index].num < this.canshu[index].goodnum) {
        console.log(this.canshu[index]);
        this.canshu[index].num++;
        this.canshu[index].good.num--;
        this.canshu[index].zongjia =
          this.canshu[index].num * this.canshu[index].good.price;
        uni.request({
          url: "http://localhost:3006/xiugaikucun",
          data: {
            num: this.canshu[index].good.num,
            id: this.canshu[index].good.id,
          },
          header: {
            "custom-header": "hello",
          },
          success: (res) => {
            console.log("数据请求成功。。。。。。。");
            this.canshu[index].good.num = res.data.goods_info.num;
            uni.setStorage({
              key: "storage_key",
              data: this.canshu,
              success: function () {
                console.log("相同货品存储成功");
              },
            });
          },
        });
      }
    },
    shanchuhuopin_fn(index) {
      console.log(index);
      var value = uni.getStorageSync("storage_key");
      value.splice(index, 1);
      uni.setStorage({
        key: "storage_key",
        data: value,
        success: function () {
          console.log("删除单项货品成功");
        },
      });
      this.canshu = value;
      this.chuhuoshulaing = value.length;
    },
    toxuanze_fn() {
      uni.navigateTo({
        url: "./xuanze",
      });
    },
    tochuangjian_fn() {
      uni.navigateTo({
        url: "./chuangjianchukedan",
      });
    },
  },
  created() {
    try {
      const value = uni.getStorageSync("storage_key");
      if (value) {
        console.log(value);
        this.canshu = value;
        this.chuhuoshulaing = value.length;
      }
    } catch (e) {
      // error
    }
  },
  mounted() {},
};
</script>
<style scoped lang="less">
.warp_box {
  margin: 0 30rpx;
  .yihang {
    display: flex;
    position: relative;
    .sousuo {
      width: 450rpx;
      height: 70rpx;
      background-color: #ddd;
      padding-left: 60rpx;
      font-size: 24rpx;
      border-radius: 10rpx;
    }
    .tianjia {
      font-size: 30rpx;
      font-weight: 700;
      width: 170rpx;
      height: 70rpx;
      line-height: 70rpx;
      background-color: #fbcc04;
    }
    img {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 18rpx;
      left: 15rpx;
    }
  }
  .erhang {
    height: 60rpx;
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;
    border-bottom: 1rpx solid #ddd;
    .x1 {
      text {
        padding-right: 15rpx;
      }
      img {
        width: 20rpx;
        height: 36rpx;
        vertical-align: middle;
      }
    }
    .x4 {
      margin-left: 100rpx;
      text {
        padding-right: 15rpx;
      }
      img {
        width: 20rpx;
        height: 26rpx;
        vertical-align: middle;
      }
    }
  }
  .neironghang {
    margin: 20rpx 0;
    .neironghangyihang {
      padding: 0 40rpx;
      display: flex;
      .left {
        width: 170rpx;
        height: 170rpx;
        background-color: red;
        img {
          width: 170rpx;
          height: 170rpx;
        }
      }

      .right {
        position: relative;
        margin-left: 20rpx;
        width: 400rpx;
        height: 170rpx;
        padding-top: 30rpx;
        .x2 {
          .xx1 {
            margin-right: 100rpx;
          }
        }
        img {
          position: absolute;
          top: 0;
          right: -10rpx;
          width: 30rpx;
          height: 30rpx;
        }
      }
    }

    .neironghangerhang {
      display: flex;
      justify-content: space-around;
      background-color: #fff;
      border-bottom: 1rpx solid #ddd;
      height: 80rpx;
      line-height: 80rpx;
      .x0 {
        width: 30rpx;
        img {
          width: 30rpx;
          height: 30rpx;
          vertical-align: middle;
        }
      }
      .x1 {
        width: 100rpx;
      }
      .x2 {
        width: 180rpx;
      }
      .x3 {
        text {
          display: inline-block;
          width: 120rpx;
          text-align: center;
          font-weight: 700;
        }
        img {
          width: 80rpx;
          height: 40rpx;
          vertical-align: middle;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
